<template>
  <div class="file-upload-container">
    <el-upload
      class="upload-demo"
      ref="upload"
      drag
      :action="uploadAction"
      :on-change="handleChange"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
      :on-error="handleError"
      :on-progress="handleProgress"
      :on-exceed="handleExceed"
      :before-upload="beforeUpload"
      :file-list="fileList"
      :accept="accept"
      :auto-upload="autoUpload"
      :multiple="multiple"
      :limit="limit"
      :show-file-list="showFileList"
      :data="uploadData"
      :disabled="disabled"
    >

      <img style="width: 35px; height: 35px" src="../../../public/static/img/上传.svg" alt="">
      <div class="upload-text">将文件拖拽到此处，或点击上传</div>
      <div slot="tip" class="el-upload__tip">
        允许上传文件类型：{{accept}}
      </div>
    </el-upload>

<!--    <div class="upload-progress" v-if="progress > 0">
      上传进度: {{ progress }}%
      <el-progress :percentage="progress"></el-progress>
    </div>-->
  </div>

<!--  <el-button type="success" @click="submitUpload">上传文件</el-button>-->

</template>

<script>

export default {
  name: 'FileUploadComponent',
  // 声明需要子传父的自定义事件名称
  emits: ['change', 'remove', 'success', 'error'],
  props: {
    // 上传接口地址
    uploadAction: {
      type: String,
      default: '#'
    },
    // 允许上传的文件类型
    accept: {
      type: String,
      default: '.apk'
    },
    // 是否自动上传
    autoUpload: {
      type: Boolean,
      default: false
    },
    // 是否支持多选文件
    multiple: {
      type: Boolean,
      default: false
    },
    // 最大上传文件数量
    limit: {
      type: Number,
      default: 1
    },
    // 文件大小限制（MB）
    maxSize: {
      type: Number,
      default: 100
    },
    // 上传提示文案
    uploadTip: {
      type: String,
      default: '拖动文件到此处，或点击上传'
    },
    // 拖拽区域文案
    dragText: {
      type: String,
      default: '拖动文件到此处'
    },
    // 上传按钮文案
    uploadButtonText: {
      type: String,
      default: '上传文件'
    },
    // 是否显示文件列表
    showFileList: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },

  data () {
    return {
      fileList: [],
      headers: {
        // 自定义上传请求的 headers
      },
      uploadData: {
        // 自定义上传请求的参数
      },
      progress: 0 // 上传进度
    }
  },

  methods: {
    handleChange (file, fileList) {
      this.fileList = fileList
      this.$emit('change', file, fileList)
    },
    handleRemove (file, fileList) {
      this.fileList = fileList
      this.$emit('remove', file, fileList)
    },
    handleSuccess (response, file, fileList) {
      this.$emit('success', response, file, fileList)
    },
    handleError (err, file, fileList) {
      this.$emit('error', err, file, fileList)
    },

    beforeUpload (file) {
      const isApk = file.name.endsWith('.apk')
      if (!isApk) {
        this.$message.error('只能上传 apk 文件!')
        return false
      }
      if (file.size > this.maxSize * 1024 * 1024) {
        this.$message.error(`文件大小不能超过 ${this.maxSize} MB!`)
        return false
      }
      return true
    },

    handleExceed (files, fileList) {
      this.$message.warning(`只能上传 ${this.limit} 个文件!`)
    },

    handleProgress (event, file, fileList) {
      // 上传进度变化时的钩子
      // 监听上传进度
      this.progress = Math.floor((event.loaded / event.total) * 100)
      console.log('上传进度:', this.progress)
    },

    submitUpload () {
      this.$refs.upload.submit()
    }
  }

}
</script>

<style>
.file-upload-container {
  text-align: center;
  margin: 0;
}

.upload-demo {
  width: 100%;
  margin: 0 auto;
}

.el-upload {
  border: 2px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.3s ease;
  padding: 20px;
}

.el-upload:hover {
  border-color: #409EFF;
}

.upload-text {
  font-size: 16px;
  color: #666;
  padding: 10px;
}

.el-upload__tip {
  font-size: 12px;
  color: #999;
  margin-top: 0;
}

.upload-progress {
  margin-top: 10px;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
}
</style>
